<script setup lang="ts">
defineOptions({
    // eslint-disable-next-line vue/no-reserved-component-names
    name: "DzbStructure",
    inheritAttrs: false,
});
import '@/styles/structure.scss';
import { computed, onMounted } from 'vue'
import {
    getStructure,
} from "@/api/dzb";

const loading = ref(false);

const dzb = ref([]);

onMounted(() => {
    dragenter()
})
/**
 * 查询
 */

getStructure()
    .then(({ data }) => {
        dzb.value = data;
        console.log(data.user.length)
        console.log(data.dangzhibu.length)

    })
    .then(() => {
        loading.value = false;
    });

/**
 * 计算属性
 */


function countJisuan(e: any) {
    if (!dzb.value || !dzb.value.user || !dzb.value.user[e]) {
        console.error("Invalid data structure");
        return 0;
    }
    if (e + 1 == dzb.value?.user.length) {
        return false;
    }
    let coutmin = 0;
    let num = 0;
    if (dzb.value?.user[e].length > dzb.value?.user[e + 1].length) {
        num = e
    }
    else {
        num = e + 1
    }
    coutmin = (dzb.value?.user[num].length - 1) * 180 + ((dzb.value?.user[num].length - 1) * num * 30);
    return coutmin;
}

function countJisuan2(e: any) {
    if (!dzb.value.user || !dzb.value.dangzhibu) {
        return 0
    }
    let dzbNum = dzb.value?.user[dzb.value?.user.length - 1].length;
    let dangzhibu = dzb.value?.dangzhibu.length;
    let coutmin = 0;
    let num = 0;
    if (dzbNum > dangzhibu) {
        num = dzbNum
        coutmin = (dzbNum - 1) * 180 + ((dzbNum - 1) * 60);
    }
    else {
        num = dangzhibu
        coutmin = (dangzhibu - 1) * 180 + ((dangzhibu - 1) * 100);
    }
    return coutmin;
}
function countJisuan3(eindex, e: any) {


    if (!dzb.value || !dzb.value.user || !dzb.value.user[e]) {
        console.error("Invalid data structure");
        return 0;
    }

    let dzbArr = dzb.value.dangzhibu[eindex].user


    if (e + 1 == dzbArr.length) {
        return false;
    }
    let coutmin = 0;
    let num = 0;
    if (dzbArr[e].length > dzbArr[e + 1].length) {
        num = e
    }
    else {
        num = e + 1
    }
    coutmin = (dzbArr[num].length - 1) * 180 + ((dzbArr[num].length - 1) * num * 30);
    return coutmin;
}



// // 滚轮放大缩小事件
const zoom = ref(1);
const handleWeel = (e: any) => {
    if (e.wheelDelta < 0) {
        zoom.value -= 0.05;
    } else {
        zoom.value += 0.05;
    }
    if (zoom.value <= 0.2) {
        zoom.value = 0.2;
    } else if (zoom.value >= 2) {
        zoom.value = 2;
    }
};
const elLeft = ref<number>(30); // 元素的左偏移量
const elTop = ref<number>(0); // 元素的右偏移量
const start_posationX = ref<number>(0); //拖拽之前的位置 x
const start_posationY = ref<number>(0); //拖拽之前的位置 y

// 拖动事件的开始
const dragstart = (e: any) => {
    start_posationX.value = e.clientX;
    start_posationY.value = e.clientY;
};

// 拖动事件的结束
const dragend = (e: any) => {
    elTop.value += e.clientX - start_posationX.value;
    elLeft.value += e.clientY - start_posationY.value;
};

// function handdrag(e:any){
// 	console.log(e)
// 	// elTop.value += e.clientX - start_posationX.value;
// 	// elLeft.value += e.clientY - start_posationY.value;
// }

//将div变为可拖放容器  解决拖拽时的显示红色禁止图标
const dragenter = () => {
    var outer: any = document.getElementsByClassName("videoNull");
    outer = Array.from(outer);
    outer.forEach(function (item: any) {
        item.ondragover = dragover;
    });
    function dragover(event: any) {
        // 阻止默认行为，变成可放置的
        event.preventDefault();
    }
};



</script>
<template>
    <div class="app-container" 
		style="position: relative;"
        @wheel="handleWeel"
        draggable="true"
		@drag="handdrag"
        @dragstart="dragstart"
        @dragend="dragend">
        <div class="boxC"  :style="`transform: scale(${zoom});position:absolute; top:${elLeft}px;left:${elTop}px`" style="display: table;">
            <div class="boxItem" v-for="item, index in dzb.user">
                <div class="bline" :style="'width:' + countJisuan(index) + 'px'"></div>
                <div class="boxCell" :style="'margin-right:' + (index * 30) + 'px;'" v-for="val in item">
                    <div class="bcl">
                        <el-image class="bimgs" :src="val.image" alt="" />
                    </div>
                    <div class="bcR">
                        <p>{{ val.position }}</p>
                        <p><span>{{ val.name }}</span></p>
                    </div>
                </div>
            </div>
            <!-- 第四城-->
            <div class="dzb diercegn4">
                <!-- :style="'width:' + countJisuan2(1) + 'px'" -->
                <div class="line"></div>
                <div class="first2Box" style="margin-right: 100px;" v-for="(item, index) in dzb.dangzhibu">
                    <div class="first2">
                        <div class="firstright">
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                    <div class="boxC" style="display: table;" v-if="item.user.length > 0">
                        <div class="boxItem" v-for="(ites, indes) in item.user">
                            <div class="bline" :style="'width:' + countJisuan3(index, indes) + 'px'"></div>
                            <div class="boxCell" :style="'margin-right:' + (indes * 30) + 'px;'" v-for="val1 in ites">
                                <div class="bcl">
                                    <el-image class="bimgs" :src="val1.image" alt="" />
                                </div>
                                <div class="bcR">
                                    <p>{{ val1.position }}</p>
                                    <p><span>{{ val1.name }}</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
  